<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
    <head>
        <base href="<%=basePath%>">
        <title>用户管理界面</title>
        <meta charset="UTF-8">

        <link href="css/admin/userDetail.css" type="text/css" rel="stylesheet"/>

        <%-- 引入jquery --%>
        <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

        <%--  引入bootstrap框架--%>
        <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

        <%-- 引入Bootstrap datetimepicker插件 --%>
        <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

        <%-- 引入pagination --%>
        <link type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
        <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

        <script type="text/javascript">
            // 界面加载完成之后执行
            $(function (){
                // 查询所有用户信息
                queryUserInformationByPage(1,10);

                // 当容器加载完成之后，对容器调用工具函数
                $("#userBirthAdd").datetimepicker({
                    language:'zh-CN', // 语言 中文
                    format:'yyyy-mm-dd', // 日期格式
                    minView:'month', // 可以选择的最小视图
                    autoclose:true, // 设置选择完日期后是否自动关闭日历，默认是false
                    initalDate:new Date(), // 初始化显示的日期
                    todayBtn:true, // 表示是否显示今天按钮，默认是false
                    clearBtn:true, // 设置是否显示清空按钮，默认是false
                    pickerPosition:'top-left'
                });
                $("#userBirthUpdate").datetimepicker({
                    language:'zh-CN', // 语言 中文
                    format:'yyyy-mm-dd', // 日期格式
                    minView:'month', // 可以选择的最小视图
                    autoclose:true, // 设置选择完日期后是否自动关闭日历，默认是false
                    initalDate:new Date(), // 初始化显示的日期
                    todayBtn:true, // 表示是否显示今天按钮，默认是false
                    clearBtn:true, // 设置是否显示清空按钮，默认是false
                    pickerPosition:'top-left'
                });

                // 给查询按钮添加单击事件
                $("#queryUsers").click(function (){
                    queryUserInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'));
                });

                // 给添加按钮添加单击事件
                $("#addUsers").click(function (){
                    // 显示添加用户模态窗口
                    $("#myModal").modal("show");
                });

                // 给确认添加按钮添加单击事件
                $("#saveCreateBook").click(function (){
                    // 收集参数
                    var userAccount=$.trim($("#userAccountAdd").val());
                    var userName=$.trim($("#userNameAdd").val());
                    var userPassword=$.trim($("#userPasswordAdd").val());
                    var userPassswordRe=$.trim($("#userPasswordReAdd").val());
                    var userBirth=$.trim($("#userBirthAdd").val());
                    var userSex=$.trim($("#userSexAdd").val());
                    var userAddress=$.trim($("#UserAddressAdd").val());
                    // 表单验证
                    if(userPassword!=userPassswordRe){
                        alert("密码不一致，请重新确认密码");
                        return;
                    }
                    // 发送请求
                    $.ajax({
                        url:'workbench/admin/user/saveUser.do',
                        data:{
                            userAccount:userAccount,
                            userName:userName,
                            userPassword:userPassword,
                            userSex:userSex,
                            userAddress:userAddress,
                            userBirth:userBirth
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data){
                            if (data.code=="1"){
                                // 关闭模态窗口
                                $("#myModal").modal("hide");
                                // 清除搜索框
                                $("#userAccount").val("");
                                $("#userName").val("");
                                $("#userSex").val("");
                                // 刷新列表
                                queryUserInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'));
                            }else{
                                alert(data.message);
                                // 模态窗口不关闭
                                $("#myModal").modal("show");
                            }
                        }
                    })
                });

                // 给所有的删除按钮添加单击事件
                $("#body").on("click","button[name='deleteUserBtn']",function (){
                    // 收集表单信息
                    var userId = this.value;
                    // 用户确定删除
                    if (window.confirm("确定删除吗？")==true){
                        // 发送请求
                        $.ajax({
                            url:"workbench/admin/deleteUserByUserId.do",
                            data:{
                                userId:userId
                            },
                            type:'post',
                            dataType:'json',
                            success:function (data){
                                if (data.code=="1"){
                                    // 刷新列表
                                    queryUserInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'));
                                }else{
                                    alert(data.message);
                                }
                            }
                        })
                    }
                });

                // 给所有的修改按钮添加单击事件
                $("#body").on("click","button[name='updateUserBtn']",function (){
                    // 收集表单信息
                    var userId = this.value;
                    // 查询书籍信息
                    $.ajax({
                        url:'workbench/admin/queryUserInformationByUserId.do',
                        data:{
                            userId:userId
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data){
                            // 填写修改模态窗口数据
                            $("#userId-update").val(userId),
                            $("#userAccountUpdate").val(data.userAccount);
                            $("#userNameUpdate").val(data.userName);
                            $("#userPasswordUpdate").val(data.userPassword);
                            $("#userPasswordReUpdate").val(data.userPassword);
                            $("#userBirthUpdate").val(data.userBirth);
                            $("#userSexUpdate").val(data.userSex);
                            $("#userAddressUpdate").val(data.userAddress);
                            $("#userRegdateUpdate").val(data.userRegdate);
                        }
                    });
                    // 显示模态窗口
                    $("#myModalUpdate").modal("show");

                });

                // 给确认修改按钮添加单击事件
                $("#updateUserBtn").click(function (){
                    // 收集参数
                    var userAccount=$.trim($("#userAccountUpdate").val());
                    var userId=$.trim($("#userId-update").val());
                    var userName=$.trim($("#userNameUpdate").val());
                    var userPassword=$.trim($("#userPasswordUpdate").val());
                    var userPassswordRe=$.trim($("#userPasswordReUpdate").val());
                    var userBirth=$.trim($("#userBirthUpdate").val());
                    var userSex=$.trim($("#userSexUpdate").val());
                    var userAddress=$.trim($("#userAddressUpdate").val());
                    var userRegdate=$.trim($("#userRegdateUpdate").val());
                    // 表单验证
                    if(userPassword!=userPassswordRe){
                        alert("密码不一致，请重新确认密码");
                        return;
                    }
                    // 发送请求
                    $.ajax({
                        url:"workbench/admin/updateUserInformation.do",
                        type:'post',
                        dataType:'json',
                        data:{
                            userId:userId,
                            userAccount:userAccount,
                            userName:userName,
                            userPassword:userPassword,
                            userAddress:userAddress,
                            userSex:userSex,
                            userRegdate:userRegdate,
                            userBirth:userBirth
                        },
                        success:function (data){
                            if (data.code="1"){
                                // 模态窗口不显示
                                $("#myModalUpdate").modal("hide");
                                // 刷新列表
                                queryUserInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'));
                            }else{
                                // 提示信息
                                alert(data.message);
                                // 模态窗口不关闭
                                $("#myModalUpdate").modal("show");
                            }
                        }
                    })
                });

            });

            // 查询用户信息
            function queryUserInformationByPage(pageNo,pageSize){
                // 收集表单
                var userAccount = $.trim($("#userAccount").val());
                var userName = $.trim($("#userName").val());
                var userSex = $.trim($("#userSex").val());

                // 发送请求
                $.ajax({
                    url:'workbench/admin/user/queryUserByActNameSexForPage.do',
                    data:{
                        userAccount:userAccount,
                        userName:userName,
                        userSex:userSex,
                        pageNo:pageNo,
                        pageSize:pageSize
                    },
                    type:'post',
                    dataType:'json',
                    success:function (res){
                        var str="";
                        str+="<tr>";
                        str+="<td>用户账号</td>";
                        str+="<td>用户姓名</td>";
                        str+="<td>出生日期</td>";
                        str+="<td>居住地址</td>";
                        str+="<td>注册时间</td>";
                        str+="<td>操作</td>";
                        str+="<td>操作</td>";
                        str+="</tr>";
                        // 渲染页面
                        $.each(res.users,function (index,obj){
                            str+="<tr>";
                            str+="<td>"+obj.userAccount+"</td>";
                            str+="<td>"+obj.userName+"</td>";
                            str+="<td>"+obj.userBirth+"</td>";
                            str+="<td>"+obj.userAddress+"</td>";
                            str+="<td>"+obj.userRegdate+"</td>";
                            str+="<td><button name=\"deleteUserBtn\" value=\""+obj.userId+"\">删除用户</button></td>";
                            str+="<td><button name=\"updateUserBtn\" value=\""+obj.userId+"\">查看修改</button></td>";
                            str+="</tr>";
                        });
                        $("#body").html(str);

                        // 计算总页数
                        var totalPages=Math.ceil(res.totalRows/pageSize);

                        // 对容器调用bs_pagination工具函数，显示翻页信息
                        $("#search_bo").bs_pagination({
                            currentPage:pageNo, // 当前页号，默认值1，相当于pageNo

                            // 必须满足 totalRows=totalPages*rowsPerPage
                            totalPages:totalPages, // 总页数，必填项
                            rowsPerPage:pageSize, // 每页显示条数，默认是10，相当于pageSize
                            totalRows:res.totalRows, // 总条数，默认值是1000

                            visiblePageLinks:5, //最多可以显示的一组卡片数，默认是5

                            showGoToPage:true, // 是否显示跳转到第几页部分，默认是true
                            showRowsPerPage:true, // 是否显示每页显示条数部分，默认是true
                            showRowsInfo:true, //是否显示记录的信息部分，默认是true

                            // 用户每次切换页面的时候执行函数
                            // 该函数返回切换页号之后的pageNo和pageSize
                            onChangePage:function (event,pageObj){
                                queryUserInformationByPage(pageObj.currentPage,pageObj.rowsPerPage);
                            }
                        });
                    }
                })
            }
        </script>
    </head>
    <body>
        <%-- 添加用户模态窗口 --%>
        <div class="modal fade" id="myModal">
            <div id="search_add">
                <div id="search_body_add">
                    <form method="post" action="#">
                        <div>
                            <label>用户账号</label>
                            <input class="in" type="text" id="userAccountAdd" name="id" required="required" />
                        </div>
                        <div>
                            <label>用户姓名</label>
                            <input class="in" type="text" id="userNameAdd" required="required" name="name" />
                        </div>
                        <div>
                            <label>密码</label>
                            <input class="in" type="password" id="userPasswordAdd" required="required" name="publisher" />
                        </div>
                        <div>
                            <label>确认密码</label>
                            <input class="in" type="password" id="userPasswordReAdd" required="required" name="publisher"  />
                        </div>
                        <div>
                            <label>出生年月</label>
                            <input class="in" type="text" id="userBirthAdd" name="price"  required="required" />
                        </div>
                        <div>
                            <label>性别</label>
                            <select class="search-in" id="userSexAdd">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                            <%-- <input class="in" type="text" id="userSexAdd" name="price"  required="required" /> --%>
                        </div>
                        <div>
                            <label>地址</label>
                            <input class="in" type="text" id="UserAddressAdd" name="price"  required="required" />
                        </div>
                        <div>
                            <input class="update"  type="button" value="添加" id="saveCreateBook"/>
                            <input class="update" type="button" value="返回" data-dismiss="modal" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <%-- 修改用户模态窗口 --%>
        <div class="modal fade" id="myModalUpdate">
            <div id="search_update">
                <div id="search_body_update">
                    <form method="post" action="#">
                        <input type="hidden" id="userId-update">
                        <div>
                            <label>用户账号</label>
                            <input class="in" type="text" id="userAccountUpdate" name="id" readonly="readonly"/>
                        </div>
                        <div>
                            <label>用户姓名</label>
                            <input class="in" type="text" id="userNameUpdate" name="name"/>
                        </div>
                        <div>
                            <label>性别</label>
                            <select class="search-in" id="userSexUpdate">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                        <div>
                            <label>密码</label>
                            <input class="in" type="password" id="userPasswordUpdate" name="price"/>
                        </div>
                        <div>
                            <label>确认密码</label>
                            <input class="in" type="password" id="userPasswordReUpdate" name="author"/>
                        </div>
                        <div>
                            <label>出生日期</label>
                            <input class="in" type="text" id="userBirthUpdate" name="pubdate" />
                        </div>
                        <div>
                            <label>居住地址</label>
                            <input class="in" type="text"  id="userAddressUpdate" name="exist" />
                        </div>
                        <div>
                            <label>注册时间</label>
                            <input class="in" type="text" id="userRegdateUpdate" readonly="readonly"/>
                        </div>
                        <div>
                            <input id="updateUserBtn" type="button" value="修改"/>
                            <input class="update" type="button" value="返回" data-dismiss="modal" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--主窗口-->
        <div class="body_right">
            <div id="search">
                <div id="search_head">
                    <form id ="form1" method="post" action="#">
                        <span>用户账号</span><input class="search_in" id="userAccount" type="text"/>
                        <span>用户姓名</span><input class="search_in" id="userName" type="text"/>
                        <span>性别</span>
                        <select class="search-in" id="userSex">
                            <option></option>
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
                        <input class="search_id" type="button" id="queryUsers" value="查询用户">
                        <input class="add_id" type="button" id="addUsers" value="添加用户">
                    </form>
                </div>

                <div id="search_body">
                    <table border="1px" id="body">

                    </table>
                </div>

                <div id="search_bo">

                </div>
            </div>
        </div>
    </body>
</html>
